<template>
  <el-card>
    <div class="manage">
      <ul class="checknum">
        <li style="float:right;">
          <el-button @click="dialog.addUser = true,formTitle = '添加新用户'" style="padding:13px 20px;" type="success">添加员工</el-button>
        </li>
      </ul>
      <div class="allsearch">
        <section class="search-content">
          <el-row :gutter="4" justify="start" type="flex">
            <el-col :span="24">
              <el-select style="width:120px;" v-model="listQuery.dateType">
                <el-option
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                  @change="manageUserHandleFilter"
                  v-for="item in dateTypes"
                />
              </el-select>
              <el-date-picker
                :picker-options="picker"
                @change="manageUserHandleFilter"
                align="right"
                end-placeholder="结束日期"
                range-separator="|"
                start-placeholder="开始日期"
                style="width:300px"
                type="daterange"
                unlink-panels
                v-model="listQuery.daterange"
                value-format="yyyy-MM-dd"
              />
              <el-select style="width:120px;" v-model="listQuery.searchType">
                <el-option
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                  @change="manageUserHandleFilter"
                  v-for="item in searchTypes"
                />
              </el-select>
              <el-input
                @keyup.enter.native="manageUserHandleFilter"
                placeholder="关键词"
                style="width:240px;"
                v-model="listQuery.searchValue"
              />
              <el-button @click="manageUserHandleFilter" size="medium" type="primary">搜索</el-button>
              <el-button @click="clearParams" size="medium" type="info">清空</el-button>
            </el-col>
          </el-row>
        </section>
      </div>

      <el-table
        :data="manageUserList"
        @selection-change="changeFun"
        border
        fit
        highlight-current-row
        style="width: 100%;margin-top:15px;"
      >
        <el-table-column @selection-change="changeFun" type="selection" min-width="5%"/>
        <el-table-column align="center" label="用户名" min-width="10%">
          <template slot-scope="scope">
            <span>{{ scope.row.nickName }}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="姓名" min-width="10%">
          <template slot-scope="scope">
            <span>{{ scope.row.name }}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="手机号" min-width="10%">
          <template slot-scope="scope">
            <span>{{ scope.row.verifiedMobile }}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="会员等级" min-width="10%">
          <template slot-scope="scope">
            <span>{{ scope.row.isVip === '1' ? scope.row.levelName : '' }}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="注册时间" min-width="15%">
          <template slot-scope="scope">
            <span>{{ scope.row.createTime }}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="前台账号状态" min-width="10%">
          <template slot-scope="scope">
            <span>{{ scope.row.locked === '0' ? '启用' : '禁用' }}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="最后登录" min-width="10%">
          <template slot-scope="scope">
            <span>{{ scope.row.loginTime }}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="操作" min-width="20%">
          <template slot-scope="scope" style="text-align: center">
            <el-dropdown
              @click="handleClick(scope.row)"
              @command="handleCommand($event,scope)"
              split-button
              type="primary"
            >
              查看
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item command="1">编辑用户信息</el-dropdown-item>
                <el-dropdown-item command="3">修改用户头像</el-dropdown-item>
                <el-dropdown-item command="4">修改密码</el-dropdown-item>
                <el-dropdown-item command="8">删除用户</el-dropdown-item>
                <el-dropdown-item command="9">账号{{ scope.row.locked === '0' ? '禁用' : '启用' }}</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </template>
        </el-table-column>
      </el-table>
      <pagination
        :limit.sync="listQuery.limit"
        :page.sync="listQuery.page"
        :total="total"
        @handleCurrentChange="handleCurrentChange"
        @handleSizeChange="handleSizeChange"
        v-show="total>0"
      />

      <!-- 添加新用户 -->
      <el-dialog :visible.sync="dialog.addUser" :title="formTitle" width="700px">
        <el-form :model="eduUser" :rules="rules" ref="addUserForm">
          <el-row>
            <el-col :span="12">
              <el-form-item :label-width="formLabelWidth" label="姓名" prop="name">
                <el-input style="width:200px;" v-model="eduUser.name"/>
              </el-form-item>
              <el-form-item :label-width="formLabelWidth" label="性别" prop="gender">
                <el-radio-group v-model="eduUser.gender">
                  <el-radio label="1">男</el-radio>
                  <el-radio label="0">女</el-radio>
                </el-radio-group>
              </el-form-item>
              <el-form-item :label-width="formLabelWidth" label="身份证号" prop="idCard">
                <el-input style="width:200px;" v-model="eduUser.idCard"/>
              </el-form-item>
              <el-form-item :label-width="formLabelWidth" label="用户名" prop="nickName">
                <el-input style="width:200px;" v-model="eduUser.nickName"/>
              </el-form-item>
              <el-form-item :label-width="formLabelWidth" label="邮箱" prop="email">
                <el-input style="width:200px;" v-model="eduUser.email"/>
              </el-form-item>
              <el-form-item :label-width="formLabelWidth" label="账号" prop="account">
                <el-input style="width:200px;" v-model="eduUser.account"/>
              </el-form-item>
              <el-form-item :label-width="formLabelWidth" label="确认密码" prop="confirmPassword">
                <el-input style="width:200px;" type="password" v-model="eduUser.confirmPassword"/>
              </el-form-item>
              <el-form-item :label-width="formLabelWidth" label="手机号" prop="verifiedMobile">
                <el-input style="width:200px;" v-model="eduUser.verifiedMobile"/>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item :label-width="formLabelWidth" label="部门">
                <treeselect v-model="eduUser.organizationUnitId" :multiple="false" :options="organizationUnitList" style="width: 200px"></treeselect>
              </el-form-item>
              <el-form-item :label-width="formLabelWidth" label="学历">
                <el-select style="width:200px;" v-model="eduUser.education">
                  <el-option
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                    v-for="item in educationList"
                  />
                </el-select>
              </el-form-item>
              <el-form-item :label-width="formLabelWidth" label="QQ">
                <el-input style="width:200px;" v-model="eduUser.qq"/>
              </el-form-item>
              <el-form-item :label-width="formLabelWidth" label="微信">
                <el-input style="width:200px;" v-model="eduUser.weixin"/>
              </el-form-item>
              <el-form-item :label-width="formLabelWidth" label="生日">
                <el-date-picker
                  placeholder="选择日期"
                  style="width:200px;"
                  type="date"
                  v-model="eduUser.birthday"
                  value-format="yyyy-MM-dd HH:mm:ss"
                />
              </el-form-item>
              <el-form-item :label-width="formLabelWidth" label="密码" prop="password">
                <el-input style="width:200px;" type="password" v-model="eduUser.password"/>
              </el-form-item>
              <el-form-item :label-width="formLabelWidth" label="用户类型" prop="userType">
                <el-select style="width:200px;" v-model="eduUser.userType">
                  <el-option
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                    v-for="item in userType"
                  />
                </el-select>
              </el-form-item>
              <el-form-item :label-width="formLabelWidth" label="用户权限">
                <el-checkbox-group v-model="roleIds">
                  <el-checkbox :key="role.id" :label="role.id" v-for="role in allRoleList">{{ role.name }}</el-checkbox>
                </el-checkbox-group>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <div class="dialog-footer" slot="footer">
          <el-button @click="cancelDialog()">取 消</el-button>
          <el-button @click="addUser()" type="primary">确 定</el-button>
        </div>
      </el-dialog>

      <!-- 编辑用户 -->
      <el-dialog :visible.sync="dialog.setUser" title="设置用户组" width="580px">
        <el-form :model="dialogData.setUser">
          <el-checkbox-group v-model="dialogData.setUser.roleIds">
            <el-checkbox :key="role.id" :label="role.id" v-for="role in allRoleList">{{ role.name }}</el-checkbox>
          </el-checkbox-group>
        </el-form>
        <div class="dialog-footer" slot="footer">
          <el-button @click="cancelSetDialog()">取 消</el-button>
          <el-button @click="updateUserRoles" type="primary">确 定</el-button>
        </div>
      </el-dialog>
      <!-- 用户头像 -->
      <el-dialog :visible.sync="dialog.userImg" title="设置用户头像" width="580px">
        <el-form :model="dialogData.userImg">
          <el-form-item :label-width="formLabelWidth" label="当前头像">
            <el-upload
              :before-upload="beforeAvatarUpload"
              :http-request="uploadFile"
              :on-change="handleChange"
              :show-file-list="false"
              action=""
              class="avatar-uploader"
            >
              <img
                :src="dialogData.userImg.largeAvatar"
                class="avatar"
                v-if="dialogData.userImg.largeAvatar"
              />
              <i class="el-icon-plus avatar-uploader-icon"/>
              <div class="el-upload__tip" slot="tip">只能上传jpg文件，且不超过2MB</div>
            </el-upload>
          </el-form-item>
        </el-form>
        <div class="dialog-footer" slot="footer">
          <el-button @click="dialog.userImg = false">取 消</el-button>
          <el-button @click="updateUserAvatar" type="primary">确 定</el-button>
        </div>
      </el-dialog>
      <!-- 修改密码 -->
      <el-dialog :visible.sync="dialog.changePassword" title="修改用户密码" width="580px">
        <el-form :model="dialogData.changePassword">
          <el-form-item :label-width="formLabelWidth" label="用户名">
            <el-input
              :disabled="true"
              style="width:300px;"
              v-model="dialogData.changePassword.nickName"
            />
          </el-form-item>
          <el-form-item :label-width="formLabelWidth" label="用户邮箱">
            <el-input
              :disabled="true"
              style="width:300px;"
              v-model="dialogData.changePassword.email"
            />
          </el-form-item>
          <el-form-item :label-width="formLabelWidth" label="新密码">
            <el-input
              @blur="checkPassword"
              style="width:300px;"
              v-model="dialogData.changePassword.newPassword"
            />
            <br/>
            <span style="color: red" v-if="checkMessageNew">&nbsp;&nbsp;{{ checkMessageNew }}</span>
          </el-form-item>
          <el-form-item :label-width="formLabelWidth" label="确认密码">
            <el-input
              @blur="checkPassword"
              style="width:300px;"
              v-model="dialogData.changePassword.confirmPassword"
            />
            <br/>
            <span style="color: red" v-if="checkMessageConfirm">&nbsp;&nbsp;{{ checkMessageConfirm }}</span>
          </el-form-item>
        </el-form>
        <div class="dialog-footer" slot="footer">
          <el-button @click="dialog.changePassword = false">取 消</el-button>
          <el-button @click="updatePassword" type="primary">确 定</el-button>
        </div>
      </el-dialog>
      <!-- 查看个人详细信息 -->
      <el-dialog :visible.sync="dialog.view" title="个人详细信息" width="580px">
        <el-form :model="dialogData.view">
          <el-form-item :label-width="formLabelWidth" label="姓名">
            <el-input :disabled="true" style="width:300px;" v-model="dialogData.view.name"/>
          </el-form-item>
          <el-form-item :label-width="formLabelWidth" label="账号">
            <el-input :disabled="true" style="width:300px;" v-model="dialogData.view.account"/>
          </el-form-item>
          <el-form-item :label-width="formLabelWidth" label="用户名">
            <el-input :disabled="true" style="width:300px;" v-model="dialogData.view.nickName"/>
          </el-form-item>
          <el-form-item :label-width="formLabelWidth" label="Email">
            <el-input :disabled="true" style="width:300px;" v-model="dialogData.view.email"/>
          </el-form-item>
          <el-form-item :label-width="formLabelWidth" label="用户组">
            <el-input :disabled="true" style="width:300px;" v-model="dialogData.view.roles"/>
          </el-form-item>
          <el-form-item :label-width="formLabelWidth" label="注册时间/IP">
            <el-input :disabled="true" style="width:300px;" v-model="dialogData.view.createTime"/>
          </el-form-item>
          <el-form-item :label-width="formLabelWidth" label="最近登录时间/IP">
            <el-input :disabled="true" style="width:300px;" v-model="dialogData.view.loginTime"/>
          </el-form-item>
          <el-form-item :label-width="formLabelWidth" label="姓名">
            <el-input :disabled="true" style="width:300px;" v-model="dialogData.view.name"/>
          </el-form-item>
          <el-form-item :label-width="formLabelWidth" label="性别">
            <el-radio-group :disabled="true" style="width:300px;" v-model="dialogData.view.gender">
              <el-radio label="1">男</el-radio>
              <el-radio label="0">女</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item :label-width="formLabelWidth" label="身份证号">
            <el-input :disabled="true" style="width:300px;" v-model="dialogData.view.idCard"/>
          </el-form-item>
          <el-form-item :label-width="formLabelWidth" label="手机号码">
            <el-input :disabled="true" style="width:300px;" v-model="dialogData.view.verifiedMobile"/>
          </el-form-item>
          <el-form-item :label-width="formLabelWidth" label="公司">
            <el-input :disabled="true" style="width:300px;" v-model="dialogData.view.company"/>
          </el-form-item>
          <el-form-item :label-width="formLabelWidth" label="职业">
            <el-input :disabled="true" style="width:300px;" v-model="dialogData.view.profession"/>
          </el-form-item>
          <el-form-item :label-width="formLabelWidth" label="个人签名">
            <el-input :disabled="true" style="width:300px;" v-model="dialogData.view.signature"/>
          </el-form-item>
          <el-form-item :label-width="formLabelWidth" label="自我介绍">
            <el-input :disabled="true" style="width:300px;" v-model="dialogData.view.description"/>
          </el-form-item>
          <el-form-item :label-width="formLabelWidth" label="个人网站">
            <el-input :disabled="true" style="width:300px;" v-model="dialogData.view.website"/>
          </el-form-item>
          <el-form-item :label-width="formLabelWidth" label="微博">
            <el-input :disabled="true" style="width:300px;" v-model="dialogData.view.weibo"/>
          </el-form-item>
          <el-form-item :label-width="formLabelWidth" label="微信">
            <el-input :disabled="true" style="width:300px;" v-model="dialogData.view.weixin"/>
          </el-form-item>
          <el-form-item :label-width="formLabelWidth" label="QQ">
            <el-input :disabled="true" style="width:300px;" v-model="dialogData.view.qq"/>
          </el-form-item>
          <el-form-item :label-width="formLabelWidth" label="评论">
            <el-input :disabled="true" style="width:300px;" v-model="dialogData.view.comment"/>
          </el-form-item>
          <el-form-item :label-width="formLabelWidth" label="生日">
            <el-input :disabled="true" style="width:300px;" v-model="dialogData.view.birthday"/>
          </el-form-item>
        </el-form>
        <div class="dialog-footer" slot="footer">
          <el-button @click="dialog.view = false" type="primary">关 闭</el-button>
        </div>
      </el-dialog>
    </div>
  </el-card>
</template>

<script>
  import Treeselect from '@riophae/vue-treeselect'
  import '@riophae/vue-treeselect/dist/vue-treeselect.css'
  import Pagination from '@/components/Pagination' // 分页组件
  import UploadExcelComponent from '@/components/UploadExcel/index.vue'
  import {
    addMoreUser,
    bathCreateAccount,
    categoryList,
    checkAccount,
    checkPhoneNumber,
    checkUserExit,
    courseList,
    coursePackageList,
    deleteUserById,
    getAllUserList,
    getCoursePrice,
    getEduxcloudClassRoomPrice,
    getEduxcloudUserById,
    getEduxcloudUserDic,
    getEduxcloudUserPager,
    joinClass,
    saveOrUpdateEduxcloudUser,
    updatePassword,
    updateUserAvatar,
    updateUserRoles
  } from '@/api/user/user'
  import {getTenantId, getUserId, getUserName} from '@/utils/auth'
  import {upLoadFile} from '@/api/upLoadFile'
  import {organizationUnitList} from '@/api/system/org'
  import {parseTime} from '@/utils'

  export default {
    components: {Pagination, UploadExcelComponent, Treeselect},
    data() {
      const confirmPassword = (rule, value, callback) => {
        if (!this.eduUser.password) {
          callback(new Error('请先输入密码再进行确认'))
        } else if (!value) {
          callback(new Error('请输入确认密码'))
        } else {
          if (value !== this.eduUser.password) {
            callback(new Error('输入的密码不一致，请重新输入'))
          } else {
            callback()
          }
        }
      };
      return {
        CategoryCourse: {},
        EduUserVo: {},
        courseCategorys: [],
        organizationUnitList: [],
        coursePackageCategorys: [],
        courseList: [],
        coursePackageList: [],
        downloadLoading: false,
        checkMessageNew: '',
        checkMessageConfirm: '',
        eduUser: {},
        allRoleList: {},
        roleIds: [],
        manageUserList: [],
        allList: [],
        imageUrl: '',
        formLabelWidth: '100px',
        total: 0,
        listLoading: true,
        listQuery: {dateType: 'login', daterange: [], role: '', regisSource: '', searchType: 'nickName', searchValue: '', startDate: '', endDate: '', page: 1, limit: 20},
        payType: [{label: '现金', value: 'm'}, {label: '微信', value: 'w'}, {label: '支付宝', value: 'z'}],
        dateTypes: [{label: '登录时间', value: 'login'}, {label: '注册时间', value: 'regis'}],
        roles: [{label: '所有角色', value: ''}],
        regisSources: [{label: '--注册来源--', value: ''}],
        searchTypes: [{label: '用户名', value: 'nickName'}, {label: '姓名', value: 'name'}, {label: '手机号', value: 'phone'}, {label: '邮件地址', value: 'email'}, {label: '登录IP', value: 'loginIp'}],
        userType: [{label: '员工', value: 'EMPLOYEE'}],
        educationList: [{label: '专科', value: 'specialty'}, {label: '本科', value: 'undergraduate'}, {label: '硕士', value: 'master'}, {label: '博士', value: 'docker'}],
        roleList: [],
        picker: {
          shortcuts: [{
            text: '最近一周',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', [start, end])
            }
          }, {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit('pick', [start, end])
            }
          }, {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit('pick', [start, end])
            }
          }]
        },
        // 添加用户弹框标题
        formTitle: '',
        // 弹窗弹出/消失
        dialog: {
          createAccount: false,
          exportAccount: false,
          addUser: false,
          // editUser: false,
          setUser: false,
          userImg: false,
          changePassword: false,
          addMoreUser: false,
          view: false,
          apply: false,
          batchApply: false
        },
        // 创建
        dialogData: {
          addMoreUser: {
            loading: false
          },
          setUser: {roleIds: []},
          userImg: {largeAvatar: ''},
          changePassword: {},
          file: '',
          view: {}
        },
        rules: {
          email: [
            {required: true, message: '请输入邮箱地址', trigger: 'blur'},
            {type: 'email', message: '请输入正确的邮箱地址', trigger: 'blur'}
          ],
          account: [
            {required: true, message: '请输入账号', trigger: 'blur'},
            {
              validator(rule, value, callback) {
                checkAccount(value).then(res => {
                  if (res.data.result) {
                    callback(new Error('账号已存在，请重新输入！'))
                  } else {
                    callback()
                  }
                })
              },
              trigger: 'blur'
            }
          ],
          name: [
            {required: true, message: '请输入姓名', trigger: 'blur'}
          ],
          gender: [
            {required: true, message: '请选择性别', trigger: 'change'}
          ],
          nickName: [
            {required: true, message: '请输入用户昵称', trigger: 'blur'},
            {
              validator(rule, value, callback) {
                if (value) {
                  checkUserExit(value).then(res => {
                    if (res.data.item) {
                      callback(new Error('昵称已存在，请重新输入！'))
                    } else {
                      callback()
                    }
                  })
                }
              },
              trigger: 'blur'
            }
          ],
          verifiedMobile: [
            {required: true, message: '请输入手机号码', trigger: 'blur'},
            {min: 11, max: 11, message: '长度为11个字符', trigger: 'blur'},
            {
              validator(rule, value, callback) {
                checkPhoneNumber(value).then(res => {
                  if (res.data.result) {
                    callback(new Error('手机号已被使用，请换一个手机号'))
                  } else {
                    callback()
                  }
                })
              },
              trigger: 'blur'
            }
          ],
          password: [
            {required: true, message: '请输入密码', trigger: 'blur'}
          ],
          confirmPassword: [
            {validator: confirmPassword, trigger: 'blur'},
            {required: true, message: '请输入确认密码', trigger: 'blur'}
          ],
          userType: [
            {required: true, message: '用户类型不能为空', trigger: 'blur'}
          ],
          idCard: [
            {min: 18, max: 18, message: '长度为18字符', trigger: 'blur'},
            {
              required: true,
              pattern: /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/,
              message: '请输入正确的身份证号',
              trigger: 'blur'
            }
          ]
        },
        // editRules: {
        //   idCard: [
        //     {min: 18, max: 18, message: '长度为18字符', trigger: 'blur'},
        //     {
        //       required: false,
        //       pattern: /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/,
        //       message: '请输入正确的身份证号',
        //       trigger: 'blur'
        //     }
        //   ]
        // },
        applyStep: 0,
        EduxcloudUser: {
          nickName: '',
          name: '',
          gender: '1',
          documentType: '',
          documentNumber: '',
          birthday: '',
          householdRegister: '',
          education: '',
          // firsetGroup: '',
          // secondGroup: '',
          verifiedMobile: '',
          homePhone: '',
          officePhone: '',
          contacts: '',
          contactsPhone: '',
          email: '',
          qq: '',
          weixin: '',
          provinces: '',
          address: '',
        },
        EduxcloudAccountVo: {
          num: '',
          startTime: '',
          endTime: '',
          startDate: '',
          endDate: '',
          tenantId: '',
        },
        categoryIds: "",
        coursePackageCategoryIds: "",
        joinClassVo: {
          type: 'course',
          userIds: [],
          courseIds: [],
          coursePackageIds: [],
          payType: '',
          tenantId: '',
          totalHours: '',
          price: '',
        },
        documentTypeOptions: [{value: '身份证', label: '身份证'}, {value: '护照', label: '护照'}, {value: '港澳通行证', label: '港澳通行证'}, {value: '台胞证', label: '台胞证'}, {value: '军官证', label: '军官证'}, {value: '士官证', label: '士官证'}, {value: '未确定证件', label: '未确定证件'}],
        multipleSelection: [],
        provincesOptions: [],
        coursePackageOptions: [],
        informationRules: {
          userName: [{required: true, message: '请输入用户名', trigger: 'blur'}],
          name: [{required: true, message: '请输入姓名', trigger: 'blur'}],
          verifiedMobile: [{required: true, message: '请输入手机号', trigger: 'blur'}],
        },
        chargeRules: {
          firstSubject: [{required: true, message: '请选择学科', trigger: 'change'}],
          secondSubject: [{required: true, message: '请选择学科小类', trigger: 'change'}],
          secondClassify: [{required: true, message: '请选择分类', trigger: 'change'}],
          coursePackage: [{required: true, message: '请选择课程包', trigger: 'change'}],
          courseIds: [{required: true, message: '请选择学习课程', trigger: 'change'}],
        }
      }
    },
    created() {
      this.getManageUserList();
      // this.getAllUserList();
      this.initUserDic()
    },
    mounted() {
      this.getCourseCategorys();
      this.getOrganizationUnitList();
      this.getCoursePackageCategorys()
    },
    methods: {
      // 改变分页页数
      handleSizeChange(val) {
        this.listQuery.page = 1;
        this.listQuery.limit = val.value;
        this.getManageUserList()
      },
      // 改变当前页
      handleCurrentChange(val) {
        this.listQuery.page = val.value;
        this.getManageUserList()
      },
      getCoursePackageCategorys() {
        categoryList('class', getTenantId()).then(response => {
          this.coursePackageCategorys = response.data.items
        }).catch(() => {
        })
      },
      clearParams() {
        this.listQuery.dateType = 'login';
        this.listQuery.daterange = [];
        this.listQuery.role = '';
        this.listQuery.regisSource = '';
        this.listQuery.searchType = '';
        this.listQuery.searchValue = '';
        this.listQuery.startDate = '';
        this.listQuery.endDate = '';
        this.getManageUserList()
      },
      // 上传文件
      beforeUpload(file) {
        const isLt1M = file.size / 1024 / 1024 < 1;
        if (isLt1M) {
          return true
        }
        this.$message({
          message: '请不要上传大小超过1M的文件',
          type: 'warning'
        });
        return false
      },
      handleSuccess({results, header}) {
        this.dialogData.addMoreUser.loading = true;
        addMoreUser(results).then(() => {
          this.$notify({title: '成功', message: '批量导入完成', type: 'success', duration: 2000});
          this.dialogData.addMoreUser.loading = false;
          this.getManageUserList()
        });
        this.dialog.addMoreUser = false
      },
      getManageUserList() {
        const params = {};
        params.dateType = this.listQuery.dateType;
        if (this.listQuery.daterange !== undefined && this.listQuery.daterange != null) {
          params.startDate = this.listQuery.daterange[0];
          params.endDate = this.listQuery.daterange[1]
        }
        params.role = this.listQuery.role;
        params.regisSource = this.listQuery.regisSource;
        params.searchType = this.listQuery.searchType;
        params.searchValue = this.listQuery.searchValue;
        params.page = this.listQuery.page;
        params.limit = this.listQuery.limit;
        params.tenantId = getTenantId();
        console.log('startDate:' + params.startDate);
        console.log('endDate:' + params.endDate);
        getEduxcloudUserPager(params).then(response => {
          this.manageUserList = response.data.items;
          this.total = response.data.total
        })
      },
      getAllUserList() {
        getAllUserList(getTenantId()).then(response => {
          this.allList = response.data.items;
        })
      },
      initUserDic() {
        getEduxcloudUserDic(getTenantId()).then(response => {
          const regisSourceList = response.data.regisSourceList;
          for (const item in regisSourceList) {
            this.regisSources.push({'value': regisSourceList[item].id, 'label': regisSourceList[item].name})
          }
          const roleList = response.data.roleList;
          for (const item in roleList) {
            this.roles.push({'value': roleList[item].id, 'label': roleList[item].name})
          }
          this.allRoleList = response.data.roleList
        })
      },
      // 数据检索
      manageUserHandleFilter() {
        this.getManageUserList()
      },
      //单个报名
      signUp(row) {
        this.EduxcloudUser = row;
        this.dialog.apply = true
      },
      // 判定头像图片是否符合要求
      beforeAvatarUpload(file) {
        const isJPG = file.type === 'image/jpeg';
        const isLt2M = file.size / 1024 / 1024 < 2;

        if (!isJPG) {
          this.$message.error('上传头像图片只能是 JPG 格式!')
        }
        if (!isLt2M) {
          this.$message.error('上传头像图片大小不能超过 2MB!')
        }
        return isJPG && isLt2M
      },
      // 上传用户头像获取
      handleChange(file) {
        this.file = file.raw
      },
      // 上传头像
      uploadFile() {
        const form = new FormData();
        form.append('name', this.file.name);
        form.append('uid', this.file.uid);
        form.append('file', this.file);
        upLoadFile(form).then(res => {
          this.dialogData.userImg.largeAvatar = res.data.url
        })
      },
      updateUserAvatar() {
        this.dialog.userImg = false;
        updateUserAvatar(this.dialogData.userImg.id, this.dialogData.userImg.largeAvatar).then(res => {
          this.$notify({
            title: '成功',
            message: '用户头像上传成功',
            type: 'success',
            duration: 2000
          });
          this.getManageUserList()
        })
      },
      // 导出按钮
      formatJson(filterVal, jsonData) {
        return jsonData.map(v => filterVal.map(j => {
          if (j === 'createTime' || j === 'loginTime') {
            return v[j] ? parseTime(v[j]) : v[j]
          } else {
            return v[j]
          }
        }))
      },
      // 表格操作按钮
      handleCommand(command, scope) {
        if (command === '1') {
          this.dialog.addUser = true;
          getEduxcloudUserById(scope.row.id).then(response => {
            this.eduUser = response.data.eduxcloudUser
          });
          this.formTitle = '编辑用户';
          return
        }
        if (command === '2') {
          this.dialog.setUser = true;
          console.log(scope.row);
          this.dialogData.setUser.id = scope.row.id;
          this.dialogData.setUser.roleIds = scope.row.roleIds ? scope.row.roleIds.split(',') : [];
          console.log(this.dialogData.setUser)
        }
        if (command === '3') {
          this.dialog.userImg = true;
          this.dialogData.userImg.largeAvatar = scope.row.largeAvatar;
          this.dialogData.userImg.id = scope.row.id
        }
        if (command === '4') {
          this.dialog.changePassword = true;
          this.dialogData.changePassword.password = scope.row.password;
          this.dialogData.changePassword.nickName = scope.row.nickName;
          this.dialogData.changePassword.email = scope.row.email;
          this.dialogData.changePassword.id = scope.row.id
        }
        if (command === '5') {
          this.$message({
            type: 'success',
            message: '密码重置邮件，发送成功'
          });
          return
        } else if (command === '6') {
          this.$message({
            type: 'success',
            message: 'Email验证邮件，发送成功'
          });
          return
        }
        if (command === '7') {
          this.$confirm(`永久封禁(${scope.row.nickName})吗`, '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            this.tableData.splice(scope.$index, 1);
            this.$message({
              type: 'success',
              message: `${scope.row.nickName}已被封禁`
            })
          }).catch(() => {
            this.$message({
              type: 'info',
              message: '取消封禁'
            })
          });
          return
        }
        if (command === '8') {
          this.$confirm(`永久删除(${scope.row.nickName})吗`, '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            deleteUserById(scope.row.id).then(res => {
              this.getManageUserList();
              this.$notify({
                title: '成功',
                message: `${scope.row.nickName}已被删除`,
                type: 'success',
                duration: 2000
              })
            })
          }).catch(() => {
            this.$message({
              type: 'info',
              message: '取消删除'
            })
          })
        }
        if (command === '9') {
          let title = '';
          if (scope.row.locked === '0') {
            title = '禁用'
          } else {
            title = '启用'
          }
          this.$confirm(`确定要${title}(${scope.row.nickName})吗`, '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            scope.row.locked = scope.row.locked === '0' ? '1' : '0';
            saveOrUpdateEduxcloudUser(scope.row).then(res => {
              this.getManageUserList();
              this.$notify({
                title: '成功',
                message: `${scope.row.nickName}已被${title}`,
                type: 'success',
                duration: 2000
              })
            })
          }).catch(() => {
            this.$message({
              type: 'info',
              message: '取消禁用'
            })
          })
        }
      },
      addUser() {
        this.$refs['addUserForm'].validate((valid) => {
          if (valid) {
            this.eduUser.creatorId = getUserId();
            this.eduUser.creatorName = getUserName();
            this.eduUser.tenantId = getTenantId();
            this.eduUser.roleIds = this.roleIds.toString();
            saveOrUpdateEduxcloudUser(this.eduUser).then(() => {
              this.eduUser = {};
              this.$notify({title: '成功', message: '创建成功', type: 'success', duration: 2000});
              this.getManageUserList()
            });
            this.dialog.addUser = false
          }
        })
      },
      cancelDialog() {
        this.dialog.addUser = false;
        this.$refs.addUserForm.clearValidate();
        this.eduUser = {};
      },
      cancelSetDialog() {
        this.dialog.setUser = false;
        this.dialogData.setUser = {roleIds: []}
      },
      updateUserRoles() {
        this.dialog.setUser = false;
        const id = this.dialogData.setUser.id.toString();
        const roleIds = this.dialogData.setUser.roleIds.toString();
        updateUserRoles(id, roleIds).then(() => {
          this.eduUser = {};
          this.$notify({title: '成功', message: '修改成功', type: 'success', duration: 2000});
          this.getManageUserList()
        })
      },
      checkPassword() {
        const newPassword = this.dialogData.changePassword.newPassword;
        const confirmPassword = this.dialogData.changePassword.confirmPassword;
        const password = this.dialogData.changePassword.password;
        if (newPassword && newPassword === password) {
          this.checkMessageNew = '不能与原来的密码一致！';
          return
        }
        this.checkMessageNew = '';
        if (confirmPassword && newPassword !== confirmPassword) {
          this.checkMessageConfirm = '两次密码不一致！';
          return
        }
        this.checkMessageConfirm = ''
      },
      updatePassword() {
        if (this.checkMessageNew || this.checkMessageConfirm) {
          return
        }
        if (!this.dialogData.changePassword.newPassword) {
          this.checkMessageNew = '新密码不能为空！';
          return
        }
        this.dialog.changePassword = false;
        const id = this.dialogData.changePassword.id;
        const password = this.dialogData.changePassword.newPassword;
        updatePassword(id, password).then(() => {
          this.$notify({
            title: '成功',
            message: '用户密码修改成功',
            type: 'success',
            duration: 2000
          });
          this.getManageUserList()
        })
      },
      // 查看按钮
      handleClick(row) {
        this.$router.push({name: 'Userinfo', params: {userId: row.id}})
      },
      applyNextStep(id) {
        this.$refs.eduxcloudUserForm.validate((valid) => {
          if (valid) {
            saveOrUpdateEduxcloudUser(this.EduxcloudUser).then(() => {
              this.joinClassVo.userIds.push(id);
              this.applyStep = 1
            });
          } else {
            return false
          }
        })
      },
      //复选框状态改变
      changeFun(val) {
        this.multipleSelection = val;
      },
      bathCreateAccount() {
        this.$refs['createAccountForm'].validate((valid) => {
          if (valid) {
            this.EduxcloudAccountVo.tenantId = getTenantId();
            bathCreateAccount(this.EduxcloudAccountVo).then(() => {
              this.$notify({title: '成功', message: '创建成功', type: 'success', duration: 2000});
              this.getManageUserList()
            });
            this.dialog.createAccount = false
          }
        })
      },
      getPirce() {
        if (this.joinClassVo.courseIds.length > 0) {
          getCoursePrice(this.joinClassVo.courseIds.join(',')).then(res => {
            this.joinClassVo.price = res.data.items
          })
        }
        if (this.joinClassVo.coursePackageIds.length > 0) {
          getEduxcloudClassRoomPrice(this.joinClassVo.coursePackageIds.join(',')).then(res => {
            this.joinClassVo.price = res.data.items
          })
        }
      },
      applyconfirm() {
        this.$refs.joinClassVoForm.validate((valid) => {
          if (valid) {
            this.multipleSelection.map(item => {
              this.joinClassVo.userIds.push(item['id'])
            });
            this.joinClassVo.tenantId = getTenantId();
            this.joinClassVo.payType = this.joinClassVo.payType.join(',');
            joinClass(this.joinClassVo).then(() => {
              this.$notify({title: '成功', message: '报名成功!', type: 'success', duration: 2000});
              this.joinClassVo = {type: 'course', userIds: [], courseIds: [], coursePackageIds: [], payType: '', tenantId: '', totalHours: '', price: ''};
              this.EduxcloudUser = {
                nickName: '',
                name: '',
                gender: '1',
                documentType: '',
                documentNumber: '',
                birthday: '',
                householdRegister: '',
                education: '',
                verifiedMobile: '',
                homePhone: '',
                officePhone: '',
                contacts: '',
                contactsPhone: '',
                email: '',
                qq: '',
                weixin: '',
                provinces: '',
                address: ''
              };

              if (this.dialog.apply) {
                this.dialog.apply = false
              }
              if (this.dialog.batchApply) {
                this.dialog.batchApply = false
              }
              if (this.applyStep === 1) {
                this.applyStep = 0
              }
              this.categoryIds = '';
              this.coursePackageCategoryIds = '';
              this.getManageUserList()
            })
          } else {
            return false
          }
        })
      },
      getCourseCategorys() {
        categoryList('course', getTenantId()).then(response => {
          console.log(response.data.items);
          this.courseCategorys = response.data.items
        }).catch(() => {
        })
      },
      getOrganizationUnitList() {
        organizationUnitList(getTenantId()).then(response => {
          this.organizationUnitList = response.data.items
        }).catch(() => {
        })
      },
      getCourseList() {
        this.EduUserVo.tenantId = getTenantId();
        this.EduUserVo.categoryId = this.categoryIds.join(',');
        this.EduUserVo.name = this.listQuery.name;
        courseList(this.EduUserVo).then(response => {
          console.log(response.data.items);
          this.courseList = response.data.items
        }).catch(() => {
        })
      },
      getCoursePackageList() {
        coursePackageList(this.coursePackageCategoryIds.join(','), getTenantId()).then(response => {
          console.log(response.data.items);
          this.coursePackageList = response.data.items
        }).catch(() => {
        })
      }
    }
  }
</script>

<style lang="scss">
  .manage {
    .avatar-uploader .el-upload {
      border: 1px dashed #d9d9d9;
      border-radius: 6px;
      cursor: pointer;
      position: relative;
      overflow: hidden;
    }

    .avatar-uploader .el-upload:hover {
      border-color: #409eff;
    }

    .avatar-uploader-icon {
      font-size: 28px;
      color: #8c939d;
      width: 178px;
      height: 178px;
      line-height: 178px;
      text-align: center;
    }

    .avatar {
      width: 178px;
      height: 178px;
      display: block;
    }

    .allsearch {
      margin-top: 0;
      padding: 0;

      .search-content {
        width: 100%;
      }
    }

    .el-dialog {
      border-radius: 6px;
    }

    .checknum {
      list-style: none;
      padding: 0 0 0 11px;
      margin: 6px 0 20px;
      height: 70px;
      line-height: 70px;
      box-sizing: border-box;
      background-color: #f8f8f8;

      li {
        float: left;
        display: block;
        margin-right: 20px;
        color: #72726f;
      }
    }

    .applyBox {
      /deep/ .el-dialog__body {
        padding: 20px;
        overflow: auto;
        max-height: 610px;
      }

      .title-hint {
        border-bottom: 1px solid #eee;
        padding: 5px;
        margin: 10px 0;
      }
    }
  }
</style>
